<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测试1</title>
    <script src="${pageContext.request.contextPath}/page/js/jquery.min.js"></script>
    <style type="text/css">

        .mymoresost_con{ width:97.5%; margin:0 auto; height: 434px;overflow-y: scroll;border: #007DDB 1px solid;}
        .mymoresost_con span{ width:20%; float:left; font-size:2em; overflow:hidden;}
        .mymoresost_con span a{ width:92.94871794871795%; display:block; height:40px; margin:10px auto; line-height:40px; border:1px solid #e0e0e0; text-align:center;text-decoration: none;color: #7F8994;}

    </style>
</head>
<body>
<div style="height: 50px;width: 100%;float: left;border: #7F8994 solid 1px;"></div>
<div class="mymoresost_con" id="num_array_div" >

</div>
<a href="javascript:test1();">下移</a>
<a href="javascript:test2();">上移</a>
</body>
<script>
    window.onload=function (){
        for(var i=0;i<300;i++){
            var span=$("<span></span>");
            var j=i+1;
            var a=$("<a></a>").attr({
                "id":"span_a"+j,
                "href":"javascript:test3("+j+");"
            }).text(j+"");
            span.append(a);
            $("#num_array_div").append(span);
        }
        // document.getElementById("num_array_div").scrollTop+=50;
    }
    function test1(){
        document.getElementById("num_array_div").scrollTop+=62;
    }
    function test2(){
        document.getElementById("num_array_div").scrollTop-=62;
    }
    function test3(id_num){
        var id_head="#span_a";
        var id=id_head+id_num;
        // $(id).attr("style","width:92.94871794871795%; display:block; height:40px; margin:10px auto; line-height:40px; border:1px solid #0b93d9; text-align:center;text-decoration: none;color: #7F8994;");
        //
        $(id).attr("style","width:92.94871794871795%; display:block; height:40px; margin:10px auto; line-height:40px; border:1px solid #e0e0e0; text-align:center;text-decoration: none;color: #7F8994;background-color: #ac2925;");
    }
</script>
</html>
